<template>
	<gracePage :customHeader="false">

		<view slot="gBody">
			<!-- #ifdef H5 -->
			<view class="download">
				<view v-if="dangqian=='iOS'" class="download_1">
					<text style="margin-top: 20rpx;">为了下次方便使用,请关注公众号</text>
					<a target="_blank" href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNDAzMjgxMw==#wechat_redirect">关注公众号</a>
				</view>
				<view v-else>
					<view class="download_1" v-if="user">
						<text style="margin-top: 20rpx;">为了下次方便使用,请点击下载</text>
						<a target="_blank" :href="download_url">
							下载APP
						</a>
					</view>

					<view class="download_1" v-else>
						<text style="margin-top: 20rpx;">为了方便使用,请先登录再下载</text>
						<text class="downs" @tap="xiandl">登录</text>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- 遮罩弹窗 -->
			<!-- <graceShade background="rgba(0,0,0,0.8)" :show="show">
				<view>
					<image @tap="gopath()" style="width: 522rpx;height: 700rpx" :src="img_url"></image>
					<view @tap="closeShade()" class="grace-flex-center" style="margin-top: 50rpx;">
						<image src="../../static/guanbiyouhuijuan.png" style="width: 57rpx;height: 57rpx;"></image>
					</view>
				</view>
			</graceShade> -->


			<!-- 顶部背景图 -->
			<!-- <view style="width: 750rpx;height: 291rpx;"> -->
			<image src="../../static/xbjin.png" mode="" style="width: 750rpx;height: 324rpx;background-size: contain;position: absolute;"></image>
			<input type="text" value="" class="sousuos" placeholder="搜索" @tap="shousuo" />
			<image src="../../static/sousuo.png" mode="" class="inps_suos"></image>
			<image src="../../static/gouwuche.png" mode="" style="width: 39rpx;height: 37rpx;margin-left: 627rpx;transform: translateY(55rpx);"
			 @tap="gowuche"></image>
			<image src="../../static/tongzhi.png" mode="" style="width: 34rpx;height: 36rpx;margin-left: 685rpx;transform: translateY(10rpx);"
			 @tap="tzxiaoxi"></image>

			<!-- </view> -->
			<!-- 顶部背景图 -->
			<!-- 商品分类 -->
			<view style="width: 690rpx;height: 326rpx;background:rgba(255,255,255,1);margin-bottom: 25rpx;margin-left: 30rpx;border-radius: 35rpx;position: relative;margin-top: 48rpx;">
				<view class="fennei_1">
					<view class="grace-columns neiyi" v-for="(i,index) in option" :key="index" @tap="tourl(i)">
						<image :src="i.tubiao" style="width: 100rpx;height: 100rpx;margin: 0 auto;"></image>
						<text style="color: #343434;font-size:22rpx;position: relative;">{{ i.name }}</text>
					</view>
				</view>
			</view>
			<!-- 通知 -->
			<!-- <view class="grace-body xiaoxi" v-if="speakerMsgs.length >= 1">
				<grace-speaker :phoneNumber="phoneNumber" height="80rpx" :vertical="true" iconColor="#E76B61" :interval="3000"
				 iconClass="grace-icons icon-speaker" :msgs="speakerMsgs"></grace-speaker>
			</view> -->
			<!-- 轮播图 -->
			<view>
				<graceswipercard @tanchuang="tanchuang2" :swiperItems="swiperItemss" height="260rpx" spacing="0rpx" padding="0px"
				 borderRadius="0rpx" indicatorActiveColor="rgba(255,255,255,1)" :scale="false"></graceswipercard>
			</view>
			<!-- 轮播图 -->
			<!-- 商品推荐、限时抢购 -->
			<!-- <view class="xiansiq">
				<view style="transform: translateY(20rpx);">
					<text style="font-size: 28rpx;font-weight: bold;margin-left: 22rpx;">限时好礼</text>
					<image src="../../static/GO.png" mode="" style="width: 58rpx;height: 26rpx;margin-left: 15rpx;" @tap="go_xianshi"></image>
				</view>
				<view style="margin-top: 24rpx;margin-left: 22rpx;">
					<text style="font-size: 24rpx;font-weight: 500;color: #A6A6A6;">限时抢购 立即享低价</text>
				</view>
				<view style="margin-left: 6rpx;margin-top: 21rpx;">
					<image src="../../static/2764df483133c3e2c464c5debcff4a6.png" mode="" style="width: 167rpx;height: 167rpx;"></image>
					<image src="../../static/5adc30213d5f42709a89bd7f1f2ff3e.png" mode="" style="width: 167rpx;height: 167rpx;"></image>
				</view>
			</view>
			<view class="sptui">
				<view style="margin-left: 21rpx;transform: translateY(19rpx);">
				<text style="font-size: 28rpx;font-weight: bold;">有好物</text>
				<text style="font-size: 20rpx;font-weight: 500;color: #A6A6A6;margin-left: 10rpx;">只给挑剔的你</text>
				</view>
				<view style="margin-left: 29rpx;transform: translateY(25rpx);">
					<image src="../../static/haowu_1.png" mode="" style="width: 75rpx;height: 75rpx;"></image>
					<image src="../../static/haowu_2.png" mode="" style="width: 75rpx;height: 75rpx;margin: 0 26rpx;"></image>
					<image src="../../static/haowu_3.png" mode="" style="width: 76rpx;height: 75rpx;"></image>
				</view>
			</view>
			<view class="qianggo">
				<view style="transform: translateY(10rpx);margin-left: 47rpx;display: inline-block;">
					<view style="font-size: 24rpx;color: #FB564A;font-weight: bold;">
						<text>佳节送礼</text>
					</view>
					<view style="font-size: 20rpx;font-weight: bold;margin: 15rpx 0;">
						<text>好物不错过</text>
					</view>
					<image src="../../static/lijiqg.png" mode="" style="width: 104rpx;height: 25rpx;"></image>
				</view>
				<view style="display: inline-block;margin-left: 45rpx;transform: translateY(13rpx);">
					<image src="../../static/liwu.png" mode="" style="width: 116rpx;height: 116rpx;"></image>
				</view>
			</view> -->
			<!-- 今日推荐 -->
			<view class="jinrtuij">
				<view style="text-align: center;margin-bottom: 16rpx;padding-top: 55rpx;">
					<!-- <image src="../../static/tpjian.png" mode="" style="width: 278rpx;height: 39rpx;margin-top: 14rpx;"></image> -->
					<text style="font-size: 28rpx;color: #000000;font-weight: bold;text-align: center;">今日推荐</text>
				</view>
				<view>
					<view style="margin-left: 29rpx;display: inline-block;margin-top: 10rpx;" @tap="detailyt(item.id)" v-for="item in tuijian">
						<image :src="item.rotation_chart[0]" mode="" style="width: 342rpx;height: 342rpx;background-color: #FFFFFF;border-radius:20rpx 20rpx 0 0;"></image>
						<view class="jiesao">
							<view style="font-size: 20rpx;margin-left: 14rpx;transform: translateY(10rpx);height: 43rpx;width: 312rpx;">
								<text>{{item.name}}</text>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view style="margin-top: 28rpx;margin-left: 13rpx;">
									<text style="font-size: 20rpx;color: #CC0000;font-weight: bold;"> ￥</text>
									<text style="font-size: 28rpx;color: #CC0000;font-weight: bold;"> {{item.prices}}</text>
								</view>
								<view style="font-size: 20rpx;color: #AEAEAE;margin-top: 28rpx;margin-right: 13rpx;">
									<text>{{item.sukuan_num}}人付款</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 底部通知 -->
			<graceBottomDialog :show="show3" v-on:closeDialog="closeDialog3">
				<scroll-view scroll-y slot="content" style="background:rgba(255,234,169,1)">
					<view style="width:750rpx;height:1030rpx;background:rgba(255,234,169,1);border-radius:20rpx 20rpx 0px 0px;margin-bottom: 10rpx;">
						<view style="position: relative;bottom: 10rpx; width:750rpx;height:1030rpx;background:rgba(255,234,169,1);border-radius:20rpx 20rpx 0px 0px;">
							<view style="position: relative;top: 20rpx;">
								<image src="../../static/index_tejia.png" style="width: 422rpx;height: 50rpx;margin-left: 164rpx;"></image>
								<image @tap="closeDialog3()" src="../../static/quxiao_yuan.png" style="margin-left: 84rpx; width: 50rpx;height: 50rpx;"></image>
							</view>
							<view class="grace-space-between grace-wrap" style="padding:0 30rpx;">
								<image v-for="(item,index) in tejia" :key="index" @tap="Goto('/pages/buy_coupons/buy_coupons?id='+item.id)"
								 :src="item.tubiao" style="margin-top: 28rpx; width: 332rpx;height: 438rpx;margin-bottom: 20rpx;"></image>
								<!-- is_vip===0?showDialog2(item.id,item.txt): -->
							</view>

						</view>
					</view>
				</scroll-view>
			</graceBottomDialog>

			<graceDialog :isTitle="false" :show="show2" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<!-- <text>请输入验证码</text> -->
					<text style="font-size: 26rpx;">{{ tanchuang_text }}</text></br>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closefirm2">继续</text>
					<text class="grace-dialog-buttons" style="color: rgba(204,41,14,1);" @tap="confirm2()">升级vip</text>
				</view>
			</graceDialog>

			<!-- <view class="cpt-mask" @click="dianj" v-show="xians">
				<image src="../../static/cpa_tan.png" mode="" style="width: 517rpx;height: 570rpx;margin-top: 93rpx;margin-left: 151rpx;"></image>
			</view> -->
			<!-- 客服帮助 -->
			<!-- <view class="kef_s" @tap="qiaozhuandaokehu">
				<image :style="'left:'+moveX+'px;top:'+moveY+'px'" @touchstart="drag_start" @touchmove.prevent="drag_hmove" src="../../static/kefs.png"
				 mode="" style="width: 152rpx;height:79rpx;transform: translate(4rpx,4rpx);"></image>
			</view> -->

			<ourLoading isFullScreen active text="加载中..." v-if="!loadings" />
		</view>

	</gracePage>

</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
	import graceSpeaker from "../../graceUI/components/graceSpeaker.vue";
	import graceswipercard from "../../graceUI/components/graceSwiperCard.vue";
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceShade from "../../graceUI/components/graceShade.vue";
	export default {
		data() {
			return {
				tanchuang_text: '',
				quan_id: 0,
				is_vip: 0,
				show3: false,
				show2: false,
				phoneNumber: '19381610495',
				tejia: [],
				is_jump: 0, //签到是否跳转
				urls: "", //如果is_jump为0时,这为请求地址,is_jump为1时这为跳转地址
				show: false,
				img_url: '',
				action: '',
				tiaozhuan: 0,
				u_state: "", //认证状态
				option: [], // 商品类型数据
				tuijian: [], // 推荐商品数据
				swiperItems: [],
				swiperItemss: [],
				speakerMsgs: [],
				is_vips: false,
				indexlei: ['/pages/commodity_page/Clothing_underwear?type=1', '/pages/commodity_page/Skin_care?type=2',
					'/pages/commodity_page/Fitness?type=3', '/pages/commodity_page/Daily_discount?type=4',
					'/pages/commodity_page/Daily_products?type=5', '/pages/commodity_page/Childrens_toys?type=6',
					'/pages/commodity_page/Shoes_bags?type=7'
				],
				xians: false,
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
				id: '',
				dangqian: 'Android',
				download_url: '',
				loadings: false,
				user: ''
			};
		},

		onLoad(opt) {
			// #ifdef H5
			var vm = this;
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上')
					// if (this.is_update === 1) {
					// 	this.Goto('/pages/update/update')
					// }
					vm.dangqian = 'Android'

					vm.req.post(
						vm.lochost + '/mytrunk/uploadfile/is_update_app', {}, {},
						function(res) {
							vm.download_url = res.data.up_url;
							// vm.updateContent = res.data;
						}
					)
					break;
				case 'ios':
					console.log('运行iOS上')
					// if (this.is_update === 1) {
					// 	uni.showToast({
					// 		title: '请安装最新版本！',
					// 		icon:'none'
					// 	})
					// }
					vm.dangqian = 'iOS'
					console.log(vm.dangqian);
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
			// #endif



			this.myshows();
			this.commodity()
			this.ingmall()
			var vm = this
			this.swiperItems = vm.swiperItems
			vm.req.post(
				vm.lochost + '/mytrunk/userapi/getuser', {}, {},
				function(res) {
					if (res.data.u_state === '未认证') {
						vm.show = true
					}
				});
			// #ifdef H5
			this.xians = true
			// #endif

			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
			// this.is_show() // 获取新用户红包弹框显示
			if (opt.u_pid) {
				var u_pid = opt.u_pid;

			} else {
				var u_pid = '';
			}
			uni.setStorageSync('my_u_pid', u_pid);

			// setTimeout(function() {
			// 	uni.showToast({
			// 		title: u_pid,
			// 		icon: 'none'
			// 	});
			// }, 2000)
		},
		onReady() {
			var vm = this;

			setTimeout(function() {
				vm.loadings = true
				// vm.$refs.loading.open();
				// vm.$refs.loading.close();
			}, 1000)
		},
		onShow() {
			const value = uni.getStorageSync('storage_key');
			console.log(value.token);
			var user = uni.getStorageSync(value.id);
			if (!user) {
				uni.showToast({
					title: '请重新登录',
					icon: 'none'
				})
			}
			this.user = uni.getStorageSync(value.id);
			var vm = this;
			// vm.option = [];
			// vm.swiperItems = [];
			// vm.speakerMsgs = [];
			// this.req.post(
			// 	this.lochost + '/mytrunk/index/get_config', {}, {},
			// 	function(res) {
			// 		vm.is_shopping = res.data.platform.is_shopping;

			// 	},'',false);
			this.req.post(
				this.lochost + '/mytrunk/userapi/getuser', {}, {},
				function(res) {
					vm.u_state = res.data.u_state;
				}, '', false);
			// vm.req.post(
			// 	vm.lochost + '/mytrunk/index/index_credit_card_list', {}, {},
			// 	function(res1) {
			// 		console.log(res1);
			// 		vm.phoneNumber = res1.data.kehu;
			// 		vm.option = res1.data.option;
			// 		vm.swiperItems = res1.data.banner;
			// 		vm.is_jump = res1.data.qiandao.is_jump;
			// 		vm.urls = res1.data.qiandao.urls;
			// 		vm.is_vips = res1.data.is_vip
			// 		vm.swiperItemss = res1.data.advertisement;
			// 		var notice_list = res1.data.notice;
			// 		var url = '';
			// 		for (let i = 0; i < notice_list.length; i++) {
			// 			vm.speakerMsgs.push({
			// 				title: notice_list[i].content,
			// 				url: '/pages/generation_plan/details_of_the_plan?id=' + notice_list[i].id,
			// 				opentype: "navigate",
			// 				color: notice_list[i].zhuangtai === 0 ? 'rgba(204,41,14,1)' : 'rgba(8,214,8,1)',
			// 			})
			// 			console.log(vm.speakerMsgs)
			// 		}
			// 	},'',false);
			this.tanhcuang_img()

		},
		methods: {
			drag_start(event) {
				console.log(event.touches[0].clientX - event.target.offsetLeft);
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 0) {
					tag[0].clientX = 0
				}
				if (tag[0].clientY < 0) {
					tag[0].clientY = 0
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
			qiaozhuandaokehu() {
				var token = uni.getStorageSync('user_token');
				console.log(token);
				uni.navigateTo({
					url: "/pages/web_view/web_views?token=" + token
				})
			},
			// 服装内衣跳转路径
			fzny() {
				this.Goto('/pages/commodity_page/Clothing_underwear')
			},
			// 护肤彩妆跳转路径
			skin() {
				this.Goto('/pages/commodity_page/Skin_care')
			},
			// 运动健身跳转路径
			fitne() {
				this.Goto('/pages/commodity_page/Fitness')
			},
			// 每日优惠跳转路径
			discount() {
				this.Goto('/pages/commodity_page/Daily_discount')
			},
			// 日用产品跳转路径
			products() {
				this.Goto('/pages/commodity_page/Daily_products')
			},
			// 儿童玩具跳转路径
			toys() {
				this.Goto('/pages/commodity_page/Childrens_toys')
			},
			// 鞋履箱包跳转路径
			bags() {
				this.Goto('/pages/commodity_page/Shoes_bags')
			},
			// 限时好礼跳转路径
			go_xianshi() {
				this.Goto('/pages/commodity_page/Time_limit')
			},
			// 购物车跳转路径
			gowuche() {
				this.Goto('/pages/Shopping_cart/Shopping_cart')
			},
			// 消息跳转路径
			tzxiaoxi() {
				this.Goto('/pages/My_message/my_message')
			},
			// 商品详细跳转路径
			detailyt(id) {
				this.Goto('/pages/commodity_page/Commodity_details?id=' + id)
			},
			myshows() {
				var vm = this;
				vm.option = [];
				vm.swiperItems = [];
				vm.speakerMsgs = [];
				this.req.post(
					this.lochost + '/mytrunk/index/get_config', {}, {},
					function(res) {
						vm.is_shopping = res.data.platform.is_shopping;

					});
				this.req.post(
					this.lochost + '/mytrunk/userapi/getuser', {}, {},
					function(res) {
						vm.u_state = res.data.u_state;
					});
				vm.req.post(
					vm.lochost + '/mytrunk/index/index_credit_card_list', {}, {},
					function(res1) {
						console.log(res1);
						vm.phoneNumber = res1.data.kehu;
						vm.swiperItems = res1.data.banner;
						vm.is_jump = res1.data.qiandao.is_jump;
						vm.urls = res1.data.qiandao.urls;
						vm.is_vips = res1.data.is_vip
						vm.swiperItemss = res1.data.advertisement;
						var notice_list = res1.data.notice;
						var url = '';
						for (let i = 0; i < notice_list.length; i++) {
							vm.speakerMsgs.push({
								title: notice_list[i].content,
								url: '/pages/generation_plan/details_of_the_plan?id=' + notice_list[i].id,
								opentype: "navigate",
								color: notice_list[i].zhuangtai === 0 ? 'rgba(204,41,14,1)' : 'rgba(8,214,8,1)',
							})
							console.log(vm.speakerMsgs)
						}
					});
				this.tanhcuang_img()
			},
			// 下载APP
			tiapz() {
				this.Goto('/pages/update/update')
			},
			// 获取商品类型数据
			commodity() {
				var vm = this
				vm.req.post(
					vm.lochost + '/mytrunk/Shoppingmall/get_commodity_type', {}, {},
					function(res) {
						console.log(res);
						vm.option = res.data
					}
				)
			},
			// 跳转搜索页
			shousuo() {
				this.Goto('/pages/commodity_page/Search_page')
			},
			// 获取推荐商品数据
			ingmall() {
				var vm = this
				vm.req.post(
					vm.lochost + '/mytrunk/Shoppingmall/get_tuijian_commodity', {}, {},
					function(res) {
						console.log(res);
						vm.tuijian = res.data
					}
				)
			},
			// 跳登录页
			xiandl() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			dianj() {
				this.xians = false
			},
			qiandao() {
				var vm = this;
				if (vm.is_jump === 0) {
					vm.req.post(
						vm.urls, {}, {},
						function(res) {
							vm.msg_show(res.msg);
						}
					)
				} else {
					vm.Goto('/pages/web_view/web_views?url=' + vm.url + '?token=' + uni.getStorageSync('user_token'));
				}
			},
			tanhcuang_img() {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/index/getvipandtequan2', {}, {},
					function(res) {
						vm.tejia = res.data.data;
						vm.is_vip = res.data.is_vip;
					}, '', false
				)
			},
			showDialog3: function() {
				this.show3 = true;
				uni.hideTabBar();
			},
			closeDialog3: function() {
				this.show3 = false;
				uni.showTabBar();
			},
			showDialog2: function(id, text) {
				console.log(text);
				this.tanchuang_text = text;
				this.quan_id = id;
				this.show2 = true;
			},
			closeDialog2: function() {
				this.show2 = false;
			},
			confirm2() {
				this.closeDialog2();
				this.Goto('/pages/rise_vip/rise_vip');
			},
			closefirm2() {
				this.closeDialog2();
				this.Goto('/pages/buy_coupons/buy_coupons?id=' + this.quan_id);
			},

			tanchuang(e) {
				if (e.t_type === "2") {
					// this.tiaozhuan=1;
					// this.img_url=e.t_img;
					// this.action=e.action;

					this.show = true
					this.showShade();
				} else if (e.t_type === "1") {
					this.showDialog3();
				}
				// if (e.id == 1) {
				// 	// uni.showToast({
				// 	// 	title: '功能开发中',
				// 	// 	icon: 'none'
				// 	// })
				// 	this.show3 = true
				// } else {
				// 	// uni.navigateTo({
				// 	// 	url: '/pages/rise_vip/rise_vip'
				// 	// })
				// 	this.show3 = true
				// }
			},
			tanchuang2(e) {
				// console.log(e.);
				// return
				if (e.urls && e.urls != '') {
					uni.switchTab({
						url: e.urls
					})
				} else {
					return
				}
				// if (e.id === 1) {
				// 	this.Goto('/pages/rise_vip/rise_vip');
				// } else {
				// 	uni.showToast({
				// 		title: '功能开发中',
				// 		icon: 'none'
				// 	})
				// }

			},
			is_show() {
				console.log(this.u_state);
				var vm = this;
				vm.req.mypost(
					vm.lochost + '/mytrunk/index/get_user_hb', {},
					function(res) {
						var data = res.data;
						console.log(data);
						vm.img_url = data.img_url;
						vm.tiaozhuan = data.tiaozhuan;
						vm.action = data.action;
						if (data.tanchu === 1) {
							vm.show = true;
							console.log(111);
						}
					}
				)
			},
			gopath() {
				var vm = this;
				if (vm.tiaozhuan === 1) {
					vm.Goto(vm.action);
				} else {
					vm.req.post(
						vm.action, {}, {},
						function(res) {
							vm.closeShade();
							vm.msg_show(res.msg);
						}
					)
				}
			},

			showShade: function() {
				uni.hideTabBar();
			},
			closeShade: function() {
				this.show = false;
				uni.showTabBar();
			},



			phone() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber //仅为示例
				});
			},
			tourl(obj) {
				console.log(obj);
				if (obj.url && obj.url != '') {
					this.Goto('/pages/web_view/web_views?url=' + url)
					return
				}
				if (obj.id) {
					this.Goto('/pages/commodity_page/Clothing_underwear?id=' + obj.id)
					return
				}
				if (name === '服装内衣' || name === '护肤彩妆' || name === '运动健身' || name === '每日优惠' || name === '日用产品' || name === '儿童玩具' ||
					name === '鞋履箱包') {
					if (this.u_state === '未认证') {
						uni.navigateTo({
							url: '/pages/authentication/non_real_name'
						})
						return
					}
				}
			}

		},
		components: {
			gracePage,
			graceswipercard,
			graceSpeaker,
			graceShade,
			graceBottomDialog,
			graceDialog
		}
	}
</script>

<style>
	.kef_s {
		position: absolute;
		top: 720rpx;
		left: 600rpx;
		z-index: 99
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 750rpx;
	}

	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}

	.cpt-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.8;
		z-index: 999;
	}

	.fennei_1 {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 12rpx;
		text-align: center;

	}

	.neiyi {
		margin-left: 23rpx;
		margin-right: 23rpx;
		flex-grow: 1 !important;
		margin-bottom: 40rpx;
	}

	.sousuos {
		width: 516rpx;
		height: 50rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		padding-left: 61rpx;
		font-size: 28rpx;
		transform: translateY(96rpx);
		margin-left: 32rpx;
	}

	.inps_suos {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		margin-top: 55rpx;
		margin-left: 52rpx;
	}

	.fennei_2 {
		display: flex;
		justify-content: space-between;
		margin-right: 23rpx;
	}

	.ryong {
		margin-top: 16rpx;
		margin-left: 30rpx;
	}

	.wanju {
		margin-top: 16rpx;
		margin-left: 94rpx;
	}

	.xiaoxi {
		width: 650rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 35rpx;
		line-height: 80rpx;
		margin-left: 30rpx;
		margin-top: 27rpx;

	}

	.xiansiq {
		display: inline-block;
		width: 346rpx;
		height: 295rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 30rpx;
	}

	.sptui {
		display: inline-block;
		width: 335rpx;
		height: 142rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		transform: translateY(-175rpx);
		margin-left: 17rpx;
	}

	.qianggo {
		position: absolute;
		margin-top: -165rpx;
		margin-left: 395rpx;
		width: 335rpx;
		height: 142rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
	}

	.jinrtuij {
		width: 750rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		padding-bottom: 110rpx;
		margin-top: 33rpx;
	}

	.jiesao {
		width: 342rpx;
		height: 112rpx;
		box-shadow: 0rpx 5rpx 5rpx 5rpx RGBA(247, 247, 247, 1);
		margin-top: -10rpx;
		border-radius: 0 0 10rpx 10rpx;
	}

	.download {
		position: fixed;
		z-index: 999;
		top: 0;
		width: 750rpx;
		height: 78rpx;
		padding-left: 1rpx;
		margin-left: -1rpx;
		margin-top: -1rpx;
		background-image: url(../../static/to.png);
		/* background-color: rgba(251, 18, 24, 1); */
	}

	.download_1 {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-right: 30rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		line-height: 44rpx;
		text-align: center;
	}

	.download_1 a {
		width: 124rpx;
		height: 44rpx;
		border-radius: 22rpx;
		background-color: #FFFFFF;
		text-decoration: none;
		color: rgba(251, 18, 23, 1);
		font-size: 22rpx;
		margin-top: 22rpx;
	}

	.downs {
		width: 124rpx;
		height: 44rpx;
		border-radius: 22rpx;
		background-color: #FFFFFF;
		text-decoration: none;
		color: rgba(251, 18, 23, 1);
		font-size: 22rpx;
		margin-top: 22rpx;

	}
</style>
